import React, { useState } from 'react';
import { Card, Button, Input, Select, Tree, DatePicker, Table } from 'antd';
import {
  DownOutlined,
  CarryOutOutlined,
  CheckOutlined,
  FormOutlined,
} from '@ant-design/icons';
import './index.less';

const { RangePicker } = DatePicker;
export default function Divide() {
  let [obj, setObj] = useState(['打印设置', '打印列表', '批打单据']);
  let { Search } = Input;
  //  选择省份下拉框改变事件
  const provinceChange = () => {};
  // 选择供应商行业 下拉框改变事件
  const insdutryChange = () => {};

  // 供应商列表左侧展示信息
  const treeData = [
    {
      title: '标志服',
      value: '标志服',
      key: '0-0',
      icon: <CarryOutOutlined />,
      children: [
        {
          title: '标志符',
          value: '标志符',
        },
        {
          title: '分销商',
          value: '分销商',
        },
        {
          title: '加盟商',
          value: '加盟商',
        },
        {
          title: '领销售',
          value: '领销售',
        },
      ],
    },
    {
      title: '电子行业',
      value: '电子行业',
      children: [
        {
          title: '代理商',
          value: '代理商',
        },

        {
          title: '直接客户',
          value: '直接客户',
        },
        {
          title: '中间商',
          value: '中间商',
        },
        {
          title: '电子产品制造商',
          value: '电子产品制造商',
        },
      ],
    },
    {
      title: '食品行业',
      value: '食品行业',
      children: [
        {
          title: '连锁商超',
          value: '连锁商超',
        },
        {
          title: '食品贸易公司',
          value: '食品贸易公司',
        },
        {
          title: '食品生产公司',
          value: '食品生产公司',
        },
      ],
    },
    {
      title: '客户',
      value: '客户',
    },
    {
      title: '医疗行业',
      value: '医疗行业',
      children: [
        {
          title: '医院',
          value: '医院',
        },
        {
          title: '其他医疗机构',
          value: '其他医疗机构',
        },
        {
          title: '医疗设备生产商',
          value: '医疗设备生产商',
        },
      ],
    },
    {
      title: '工程行业',
      value: '工程行业',
      children: [
        {
          title: '土建工程公司',
          value: '土建工程公司',
        },
        {
          title: '安装工程公司',
          value: '安装工程公司',
        },
        {
          title: '工程设备贸易公司',
          value: '工程设备贸易公司',
        },
      ],
    },
  ];

  // 左侧树 选择时触发事件
  const treeSelect = (selectedKeys, info) => {
    console.log(selectedKeys, info);
  };

  // 表格列 及数据
  const columns = [
    {
      title: '序号',
      dataIndex: 'name',
    },
    {
      title: '客户编号',
      dataIndex: 'age',
    },
    {
      title: '客户名称',
      dataIndex: 'address',
    },
    {
      title: '所在省份',
      dataIndex: 'address',
    },
    {
      title: '所在市区',
      dataIndex: 'address',
    },
    {
      title: '联系人姓名',
      dataIndex: 'address',
    },
    {
      title: '领用状态',
      dataIndex: 'address',
    },
    {
      title: '申请人员',
      dataIndex: 'address',
    },
    {
      title: '领用人员',
      dataIndex: 'address',
    },
    {
      title: '领用时间',
      dataIndex: 'address',
    },
  ];
  const data = [];
  for (let i = 0; i < 46; i++) {
    data.push({
      key: i,
      name: `Edward King ${i}`,
      age: 32,
      address: `London, Park Lane no. ${i}`,
    });
  }
  // 表格多选框
  const [selectedRowKeys, setSelectedRowKeys] = useState([]);
  const onSelectChange = (newSelectedRowKeys) => {
    console.log('selectedRowKeys changed: ', newSelectedRowKeys);
    setSelectedRowKeys(newSelectedRowKeys);
  };

  const rowSelection = {
    selectedRowKeys,
    onChange: onSelectChange,
  };

  return (
    <div className="suplist">
      <div className="topnav">
        <Button className="but111" size="small">
          新增
        </Button>
        <Button className="but111" size="small">
          修改
        </Button>
        <Button className="but111" size="small">
          删除
        </Button>
        <Button className="but111" size="small">
          过滤
        </Button>
        <Button className="but111" size="small">
          还原
        </Button>
        <Select
          placeholder="打印"
          style={{
            width: 120,
          }}
          options={obj.map((province) => ({
            label: province,
            value: province,
          }))}
        />
        <Button className="but111" size="small">
          导入
        </Button>
        <Button className="but111" size="small">
          导出
        </Button>
        <Button className="but111" size="small">
          查看日志
        </Button>
      </div>

      <div className="body">
        客户名称：
        <Search
          placeholder="请选择或输入"
          style={{ width: '165px', height: '28px', marginRight: '15px' }}
        />
        领用人：
        <Search
          placeholder="请选择或输入"
          style={{ width: '165px', height: '28px', marginRight: '15px' }}
        />
        领用时间：
        <RangePicker />
        领用状态：
        <Select
          defaultValue="全部"
          style={{ width: '165px', height: '28px', marginRight: '15px' }}
          onChange={provinceChange}
          options={[
            {
              value: '全部',
              label: '全部',
            },
            {
              value: '北京',
              label: '北京',
            },
            {
              value: '河北',
              label: '河北',
            },
            {
              value: '天津',
              label: '天津',
            },
          ]}
        />
        申请人：
        <Search
          placeholder="请选择或输入"
          style={{ width: '165px', height: '28px', marginRight: '15px' }}
        />
        <Button className="btn">查询</Button>
        <h2 style={{ textAlign: 'center', marginTop: '20px' }}>
          待分配客户列表
        </h2>
        <div className="suptab">
          <div className="lefttree">
            <Tree
              showLine
              // switcherIcon={<DownOutlined />}
              // switcherIcon={}
              defaultExpandAll
              onSelect={treeSelect}
              treeData={treeData}
            />
          </div>
          <div className="righttab">
            <Table
              bordered={true}
              rowSelection={rowSelection}
              columns={columns}
              pagination={false}
              dataSource={data}
            ></Table>
          </div>
        </div>
      </div>
    </div>
  );
}
